<template>
  <view class="building-run">
    <!-- 导航栏 -->
    <u-navbar title="楼栋跑腿" :placeholder="true" @leftClick="goBack">
    </u-navbar>

    <!-- 跑腿人员列表 -->
    <view class="runner-list">
      <view 
        class="runner-item" 
        v-for="runner in runners" 
        :key="runner.id"
        @click="selectRunner(runner)"
      >

        <view class="runner-info">
          <view class="runner-header">
            <view class="avatar-name">
              <image :src="runner.avatar" mode="aspectFill" class="header-avatar"></image>
              <text class="runner-name">{{ runner.name }}</text>
            </view>
          </view>
          <view class="runner-details">
                          <view class="detail-item">
                <text class="detail-text">微信号码：</text>
                <view class="wechat-box" @click="copyWechat(runner.wechat)">
                  <text class="wechat-text">点击获取</text>
                </view>
              </view>
            <view class="detail-item">
              <text class="detail-text">在线时间：{{ runner.onlineTime }}</text>
            </view>
            <view class="detail-item">
            <text class="detail-text">自我介绍：{{ runner.introduction }}</text>
          </view>
          </view>

        </view>

      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="runners.length === 0">
      <u-icon name="user" size="60" color="#ccc"></u-icon>
      <text class="empty-text">暂无跑腿人员</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BuildingRun',
  
  data() {
    return {
      // Mock数据 - 跑腿人员列表
      runners: [
        {
          id: 1,
          name: '张小明',
          avatar: 'https://picsum.photos/400/200?random=201',
          wechat: 'xiaoming123',
          onlineTime: '08:00-22:00',
          isOnline: true,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 2,
          name: '李小红',
          avatar: '/static/images/avatar2.png',
          wechat: 'xiaohong456',
          onlineTime: '09:00-21:00',
          isOnline: true,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 3,
          name: '王大力',
          avatar: '/static/images/avatar3.png',
          wechat: 'dali789',
          onlineTime: '07:00-23:00',
          isOnline: false,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 4,
          name: '陈小美',
          avatar: '/static/images/avatar4.png',
          wechat: 'xiaomei321',
          onlineTime: '10:00-20:00',
          isOnline: true,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 5,
          name: '刘小强',
          avatar: '/static/images/avatar5.png',
          wechat: 'xiaoqiang654',
          onlineTime: '08:30-21:30',
          isOnline: true,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 6,
          name: '赵小芳',
          avatar: '/static/images/avatar6.png',
          wechat: 'xiaofang987',
          onlineTime: '09:30-19:30',
          isOnline: false,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 7,
          name: '孙小刚',
          avatar: '/static/images/avatar7.png',
          wechat: 'xiaogang147',
          onlineTime: '08:00-22:00',
          isOnline: true,
          introduction: '送水送零食，喊我就来'
        },
        {
          id: 8,
          name: '周小丽',
          avatar: '/static/images/avatar8.png',
          wechat: 'xiaoli258',
          onlineTime: '10:00-18:00',
          isOnline: true,
          introduction: '送水送零食，喊我就来。'
        },
        {
          id: 9,
          name: '吴小军',
          avatar: '/static/images/avatar9.png',
          wechat: 'xiaojun369',
          onlineTime: '07:30-21:30',
          isOnline: false,
          introduction: '送水送零食，喊我就来。'
        },
        {
          id: 10,
          name: '郑小华',
          avatar: '/static/images/avatar10.png',
          wechat: 'xiaohua741',
          onlineTime: '09:00-20:00',
          isOnline: true,
          introduction: '送水送零食，喊我就来。'
        },
        {
          id: 11,
          name: '王小敏',
          avatar: '/static/images/avatar11.png',
          wechat: 'xiaomin852',
          onlineTime: '08:30-19:30',
          isOnline: true,
          introduction: '送水送零食，喊我就来。'
        },
        {
          id: 12,
          name: '冯小伟',
          avatar: '/static/images/avatar12.png',
          wechat: 'xiaowei963',
          onlineTime: '08:00-22:00',
          isOnline: false,
          introduction: '送水送零食，喊我就来。'
        }
      ]
    }
  },
  

  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 选择跑腿人员
    selectRunner(runner) {
      console.log('选择跑腿人员:', runner)
      // 这里可以跳转到跑腿人员详情页面
      uni.showToast({
        title: `选择了${runner.name}`,
        icon: 'none'
      })
    },
    
    // 复制微信号
    copyWechat(wechat) {
      uni.setClipboardData({
        data: wechat,
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'success'
          })
        }
      })
    },
    

  }
}
</script>

<style lang="scss" scoped>
.building-run {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

.runner-list {
  padding: 20rpx;
}

.runner-item {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .runner-info {
    width: 100%;
    
    .runner-header {
      margin-bottom: 20rpx;
      
      .avatar-name {
        display: flex;
        align-items: center;
        
        .header-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;
        }
        
        .runner-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
      }
    }
    
    .runner-details {
      margin-bottom: 20rpx;
      
      .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-text {
          font-size: 26rpx;
          color: #666;
          margin-right: 10rpx;
        }
        
        .wechat-box {
          display: flex;
          align-items: center;
          background: #f8f9fa;
          border-radius: 8rpx;
          padding: 10rpx 15rpx;
          border: 1rpx solid #e0e0e0;
          
          .wechat-text {
            font-size: 26rpx;
            color: #333;
            margin-right: 10rpx;
          }
        }
      }
    }
    
    .runner-intro {
      .intro-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  

}



.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 20rpx;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
}
</style> 